<!DOCTYPE html>
<!-- saved from url=(0070)http://webrtc.googlecode.com/svn/trunk/samples/js/demos/html/gum1.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>getUserMedia Demo 4</title>
<style>
video {
    border:5px solid black;
    width:400px;
    height:300px;
}
button {
    font: 18px sans-serif;
    padding: 8px;
}
</style>
</head>
<body>
<video id="vid1" name="morrallas" autoplay="true"></video>
<video id="vid2" autoplay="true"></video>
<video id="vid3" autoplay="true"></video>
<video id="vid4" autoplay="true"></video>
<br/>
<button id="btn" onclick="start1()">Start Lowres (160x120)</button>
<button id="btn" onclick="start2()">Start Midres (320x240) @15fps</button>
<button id="btn" onclick="start3()">Start NormRes Unconstrained (640x480)</button>
<button id="btn" onclick="start4()">Start HighRes (960x720) @8fps</button>
<script>
video1= document.getElementById("vid1");
 var constraints1 ={
  "audio": false, "video": { "mandatory": {
    "minWidth": "160", "maxWidth": "160", "minHeight": "120", "maxHeight": "120",
    "minFrameRate": "30"
   },
   "optional": []
  }
 }
video2= document.getElementById("vid2");
 var constraints2 ={
  "audio": false, "video": { "mandatory": {
    "minWidth": "320", "maxWidth": "320", "minHeight": "240", "maxHeight": "240",
    "maxFrameRate": "15"
   },
   "optional": []
  }
 }
video3 = document.getElementById("vid3");

video4= document.getElementById("vid4");
 var constraints4 ={
  "audio": false, "video": { "mandatory": {
    "minWidth": "960", "maxWidth": "960", "minHeight": "720", "maxHeight": "720",
    "maxFrameRate": "8"
   },
   "optional": []
  }
 }

function start1() {
  navigator.webkitGetUserMedia(constraints1, gotStream1,   getUserMediaError); 
  btn.disabled = true;
}
function gotStream1(stream) {
  video1.src = webkitURL.createObjectURL(stream);
}
function start2() {
  navigator.webkitGetUserMedia(constraints2, gotStream2,  getUserMediaError); 
  btn.disabled = true;
}
function gotStream2(stream) {
  video2.src = webkitURL.createObjectURL(stream);
}
function start3() {
  navigator.webkitGetUserMedia({video:true}, gotStream3,  getUserMediaError); 
  btn.disabled = true;
}
function gotStream3(stream) {
  video3.src = webkitURL.createObjectURL(stream);
}
function start4() {
  navigator.webkitGetUserMedia(constraints4, gotStream4,  getUserMediaError); 
  btn.disabled = true;
}
function gotStream4(stream) {
  video4.src = webkitURL.createObjectURL(stream);
}

function getUserMediaError(e) {
  alert('Error during webkitGetUserMedia: '+e);
}

</script>



</body></html>
